import React, { Component } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
import './index.css'

export default class Search extends Component {
  inputRef = React.createRef()

  static propTypes = {
    // updateLoading: PropTypes.func.isRequired,
    // updateList: PropTypes.func.isRequired
    updateAddStatus: PropTypes.func.isRequired
  }

  // 点击搜索
  handleSearch = () => {
    // this.props.updateLoading(true)
    this.props.updateAddStatus({ isFirst: false, isLoading: true })

    const inputValue = this.inputRef.current.value
    axios
      .get(`http://localhost:3000/api1/search/users?q=${inputValue}`)
      .then(({ data = {} }) => {
        console.log('data-->', data)
        // this.props.updateList(data.items || [])
        this.props.updateAddStatus({ list: data.items || [] })
      })
      .catch((error) => {
        this.props.updateAddStatus({ errInfo: '错误信息', list: [] })
      })
      .finally(() => {
        // this.props.updateLoading(false)
        this.props.updateAddStatus({ isLoading: false })
      })
  }

  render() {
    return (
      <div className="search-box">
        <h2>我是搜索段落标题</h2>
        <input ref={this.inputRef} type="text" placeholder="输入关键字" />
        <button onClick={this.handleSearch}>搜索</button>
      </div>
    )
  }
}
